<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>Content sliders based on Bootstrap modals - Ace Admin</title>

    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />

    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="assets/css/ace-fonts.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />

</head>

<body class="no-skin">
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div id="right-menu" class="modal aside" data-body-scroll="false" data-offset="true" data-placement="right" data-fixed="true" data-backdrop="false" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header no-padding">
                    <div class="table-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            <span class="white">&times;</span>
                        </button>
                        Based on Modal boxes
                    </div>
                </div>

                <div class="modal-body">
                    <h3 class="lighter">Custom Elements and Content</h3>

                    <br />
                    With no modal backdrop
                    3
                </div>
            </div><!-- /.modal-content -->

            <button class="aside-trigger btn btn-info btn-app btn-xs ace-settings-btn" data-target="#right-menu" data-toggle="modal" type="button">
                <i data-icon1="fa-plus" data-icon2="fa-minus" class="ace-icon fa fa-plus bigger-110 icon-only"></i>
            </button>
        </div><!-- /.modal-dialog -->
    </div>
</div><!-- /.main-container -->

<!-- basic scripts -->
<script src="js/jquery-1.4.2.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->

<!-- ace scripts -->
<script src="js/ace-elements.js"></script>
<script src="js/elements.aside.js"></script>

<script src="js/ace.js"></script>

<!-- inline scripts related to this page -->
<script type="text/javascript">
    jQuery(function($) {
        $('.modal.aside').ace_aside();

        $(document).one('ajaxloadstart.page', function(e) {
            //in ajax mode, remove before leaving page
            $('.modal.aside').remove();
            $(window).off('.aside')
        });
    })
</script>


</body>
</html>